<template>
  <div class="my-application-container">
    <van-cell class="header">
      我的申请预约
    </van-cell>
    <van-row>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        autofocus="true"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </van-row>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <application-info
          :application-list="list"
        />
      </van-list>
    </van-pull-refresh>
    <van-tabbar route :safe-area-inset-bottom="true" class="footTabbar">
      <van-tabbar-item to="/" class="left-route van-button--default">首页</van-tabbar-item>
      <van-tabbar-item to="/article" class="van-button--info">担保申请预约</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Cell, CellGroup, Col, Row, Tag, Panel, Toast, Search, List, PullRefresh, Tabbar, TabbarItem } from 'vant'
import ApplicationInfo from '@/components/ApplicationInfo/index.vue'
import FooterTabbar from '@/components/FooterTabbar.vue'
import { getUsers } from '@/api/users'

@Component({
  name: 'MyApplication',
  components: {
    [CellGroup.name]: CellGroup,
    [Col.name]: Col,
    [Row.name]: Row,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Panel.name]: Panel,
    [Search.name]: Search,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    ApplicationInfo,
    FooterTabbar
  }
})

export default class extends Vue {
  // @Prop({ required: false }) private list!: any[]

  private active: number = -1
  private value = ''
  private refreshing = false
  private loading = false
  private finished = false
  private list:any = []
  private listQuery = {
    current: 1,
    size: 10
  }
  private onSearch () {
    Toast(this.value)
    console.log(this.value)
  }
  mounted () {
    this.onLoad()
  }
  private onRefresh () {
    this.finished = false
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    this.loading = true
    this.onLoad()
  }
  private async onLoad () {
    if (this.refreshing) {
      this.list = []
      this.refreshing = false
    }
    this.loading = true
    const { data } = await getUsers(this.listQuery)
    this.list = data.records
    setTimeout(() => {
      this.loading = false
      if (this.list.length >= 4) {
        this.finished = true
      }
    }, 0.5 * 1000)
  }
}
</script>

<style lang="scss">
.my-application-container {
 }
</style>

<style lang="scss" scoped>
.my-application-container {
  padding-bottom: 50px;
  .van-search{
    padding-top: 0;
  }
  .van-cell{
    padding: 6px 16px;
    &.header{
      font-weight: bold;
      &::after{
        border-bottom: none;
      }
    }
  }
  .van-tabbar{
    height: 45px;
    line-height: 45px;
    .van-tabbar-item{
      font-size: 14px ;
    }
  }
}
</style>
